<template>
  <div class="title">
    <van-icon name="arrow-left" @click="$router.back()" />
    <h1>{{ formData.type == 2 ? '竞拍' : '出售' }}</h1>
  </div>
  <div class="innerPage" v-if="falg">
    <div class="inner-img">
      <div class="img-bg" :style="'background-image:url(' + Contentlist.cover + ') '"
        v-if="VideoIndexOf(Contentlist.cover)">
      </div>
      <div class="img-bg" :style="'background-image:url(' + Contentlist.cover + ') '" v-else>
        <vdeo :collection="Contentlist.cover" class="video" />
      </div>
    </div>
    <div class="bottom-bg"></div>
    <van-row justify="center">
      <van-col span="24" class="inner-title">
        <h1>{{ Contentlist.name }}</h1>
        <p class="right">{{ Contentlist.code }}</p>
      </van-col>
    </van-row>
    <van-row justify="end" class="colletion-authon">
      <van-col span="12">购买价格</van-col>
      <van-col span="12" class="right"><span>￥ {{ Contentlist.amount }}</span></van-col>
    </van-row>
    <div class="form">
      <h1>您要{{ formData.type == 2 ? '竞拍' : '出售' }}的价格：</h1>
      <van-cell-group inset>
        <van-field v-model="formData.price" placeholder="请输入出售的价格" @change="getProbably" />
      </van-cell-group>
      <van-cell-group inset v-if="formData.type == 2">
        <p class="inputTime" v-if="!formData.time" @click="formData.showPicker = true">请输入竞拍时间（时）</p>
        <p v-else @click="formData.showPicker = true" class="inputTime">{{ formData.time }} 小时</p>
        <van-popup v-model:show="formData.showPicker" round position="bottom">
          <van-picker :columns="formData.columns" @cancel="formData.showPicker = false" @confirm="onConfirm" />
        </van-popup>
      </van-cell-group>
      <div v-if="formData.type == 2">
        <p>1. 每次竞价至少要加价{{ formData.integral }}积分</p>
        <p>2. 交易成功扣{{ formData.ServiceCharge * 100 }}%的手续费</p>
        <p>3. 竞拍时间最长可设置24小时</p>
      </div>
      <div v-else>
        <p>服务器：手续费{{ toPercent(formData.SellPro) }}</p>
        <p>预计此次出售价格实际可得<span>{{ formData.probably ? formData.probably : "0" }}</span>元</p>
        <p class="pb20">出售后24小时无人购买则自动下架</p>
      </div>
    </div>
    <div class="AggressDiv">
      <van-checkbox v-model="formData.checked" checked-color="#37dc6d" class="policy">
        <div class="isAggressDiv">我已阅读并同意
          <span @click="openAgreement(1)">《商户入驻协议》</span>
        </div>
      </van-checkbox>
    </div>
    <van-button type="primary" block class="linearbg" @click="pay">确定</van-button>
    <privacy-policy :agreementData="agreementData" />
    <Pwdwarp ref="PwdShow" :paydata="formData" />
  </div>
</template>
<script>
import { defineComponent, ref, reactive, toRefs, onMounted, computed } from 'vue'
import Clipboard from 'clipboard';
import useClipboard from 'vue-clipboard3'
import { Toast } from "vant";
import { useStore } from "vuex";
import { useRouter } from "vue-router"
import { getCollectionInf, SellProcedures, setSell, listAuction, Goauction } from "@/api/public";
import { FixedPercent, toPercent, VideoIndexOf } from '@/utils/phone'
import privacyPolicy from '@/components/privacyPolicy'
import Pwdwarp from "@/components/pwd.vue";
import vdeo from "@/components/video.vue";
export default {
  components: {
    privacyPolicy,
    Pwdwarp,
    vdeo
  },
  setup(props) {
    const store = useStore();
    const router = useRouter()
    const Contentlist = ref({})
    const formData = reactive({
      price: '',
      SellPro: "",
      probably: 0,
      checked: false,
      id: router.currentRoute.value.query.id,
      type: router.currentRoute.value.query.type,
      collectionId: '',
      time: '',
      showPicker: false,
      columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
      ServiceCharge: '',
      integral: '',
    })
    const agreementData = reactive({
      status: false,
      type: 1
    })
    const onConfirm = (value) => {
      formData.time = value
      formData.showPicker = false
    };
    const openAgreement = (type) => {
      agreementData.status = true
      agreementData.type = type
    }
    const falg = ref(false)
    const getProbably = () => {
      formData.probably = formData.price - (formData.price * formData.SellPro)
    }
    const paydata = ref({
      id: router.currentRoute.value.query.id,
      type: router.currentRoute.value.query.type,
      price: formData.price,
      userCollectionId: router.currentRoute.value.query.id
    })
    const user_info = computed(() => {
      return store.getters.user_info
    })
    const PwdShow = ref(null)
    const pay = () => {
      if (!formData.price) {
        Toast('请输入交易金额')
        return
      }
      if (!formData.checked) {
        return Toast('请阅读且同意协议')
      }
      console.log(user_info.value.state)
      if (!user_info.value.payPassword) {
        Toast('请先设置交易密码')
        router.push('/editPwd')
        return
      }
      if (user_info.value.realName == '' || user_info.value.realName == null) {
        Toast('请先实名认证')
        router.push('/realName')
        return
      }
      formData.id = router.currentRoute.value.query.id
      PwdShow.value.pwdopen = true
    }
    onMounted(() => {
      listAuction().then(res => {
        formData.ServiceCharge = res.data.data.handling_fee
        formData.integral = res.data.data.markup_integral
      })
      load()
      const data = {
        userCollectionId: router.currentRoute.value.query.id
      }
      getCollectionInf(data).then(res => {
        Contentlist.value = res.data.data
        formData.id = Contentlist.value?.userCollectionId
        formData.collectionId = res.data.data.collectionId
        console.log(formData.collectionId)
        if (res.data.success && Contentlist.value) {
          falg.value = true
        }
      })
      SellProcedures().then(e => {
        formData.SellPro = e.data.data
        console.log(e)
      })
    })
    const load = async () => {
      await store.dispatch('user/getUserAll')
    }
    return {
      Contentlist, formData, pay, paydata, PwdShow, FixedPercent, toPercent, getProbably, falg, VideoIndexOf,
      openAgreement, agreementData, onConfirm
    }
  }
}
</script>
<style lang="less" scoped>
.video {
  width: 648px;
  height: 648px;

  video {
    width: 648px;
    height: 648px;
  }
}

.videoContainer {
  overflow: hidden;
  border-radius: 80px;
  border: 1px solid #999;

  .fullscreenVideo {
    width: 648px;
    height: 648px;
  }
}

.innerPage {
  &:deep(.van-checkbox__label) {
    color: #ffffff;
    opacity: 0.6;
  }

  .AggressDiv {
    margin: 100px 30px 20px;
    font-size: 28px;
    font-weight: 400;
    color: #ffffff;

    span {
      font-size: 28px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #37dc6d;
      background: linear-gradient(-90deg, #37dc6d 0%, #34d1f9 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .form {
    padding: 50px 20px 20px 20px;
    margin: 30px 20px;
    // height: 330px;
    background: #282a2c;
    border: 1px solid #ffffff;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.35);
    border-radius: 20px;

    h1 {
      margin: 0;
      font-size: 34px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 20px;
    }

    p {
      font-size: 22px;
      font-family: Source Han Sans CN;
      font-weight: 300;
      color: #ffffff;
      margin-top: 20px;

      span {
        color: #fa2a2a;
      }
    }

    &:deep(.van-cell-group) {
      width: 668px;
      height: 88px;
      background: #000000;
      border-radius: 10px;
      margin: 0 auto;
      margin-top: 20px;
    }

    &:deep(.van-field) {
      background: transparent;
      font-weight: 300;
      color: #b9c4c7;
      font-size: 30px;
    }
  }

  padding-bottom: 148px;

  .colletion-authon {
    padding: 0px 18px;
    font-size: 34px;
    color: #ffffff;
    line-height: 140px;
    margin: 30px 20px 0px;
    background: #282a2c;
    border: 1px solid #ffffff;
    border-top-color: #999;
    box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.35);
    border-radius: 20px;

    p {
      font-size: 30px;
      color: #b9c4c7;
      line-height: 140px;
    }

    .right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      text-align: right;

      img {
        width: 40px;
        margin-left: 20px;
      }

      span {
        text-align: center;
        font-size: 30px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        background: linear-gradient(-90deg, #37dc6d 0%, #34d1f9 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .inner-img {
    width: 648px;
    height: 648px;
    background: linear-gradient(0deg, #161718, #4b4c4d);
    border: 2px solid #ffffff;
    border-radius: 80px;
    margin: 80px auto 20px;
    overflow: hidden;

    .img-bg {
      //   width: 568px;
      //   height: 445px;
      width: 648px;
      height: 648px;
      background-size: 100% 100%;
      //   margin: 100px auto;
      position: relative;
    }
  }

  .bottom-bg {
    background: url('../../assets/image/bottom.png');
    width: 660px;
    height: 220px;
    background-size: cover;
    margin: 0px auto;
  }

  .inner-title {
    text-align: center;

    h1 {
      font-size: 46px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #f8f8f8;
      line-height: 103px;
      margin: 0px;
    }

    p {
      font-size: 36px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #f8f8f8;
      background: linear-gradient(-90deg, #37dc6d 0%, #34d1f9 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .linearbg {
    margin: 0px 35px 30px;
    width: 680px;
    height: 88px;
    background: linear-gradient(-90deg, #37dc6d, #34d1f9);
    border-radius: 44px;
    border: none;
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    line-height: 70px;
  }
}

.pb20 {
  padding-bottom: 20px;
  display: block;
}

.title {
  padding: 20px;
  width: 94%;
  color: #ffffff;
  display: flex;
  align-items: center;

  h1 {
    margin: 0;
    font-size: 32px;
    font-family: Source Han Sans CN;
    font-weight: normal;
    color: #ffffff;
    text-align: center;
    display: block;
    width: 90%;
  }

  span {
    display: inline-block;
    font-size: 26px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #ffffff;
  }

  .van-icon-arrow-left {
    font-size: 50px;
  }
}

.inputTime {
  line-height: 88px !important;
  font-weight: 500 !important;
  color: #cbd5d8 !important;
  font-size: 28px !important;
  margin-top: 0 !important;
  text-indent: 32px;
}
</style>